<template>
  <el-dialog  title="关联权限" :visible.sync="showDialog" width="45%">
   <!-- 绘制树 -->
   <!-- check-strictly 默认是false，父子关联 -->
   <el-tree :data="allAuthList"
    :props="{label:'name'}"
    show-checkbox
    node-key="id"
    :default-checked-keys="chechkAuth"
    :check-strictly="true"
    default-expand-all
    ref="tree"
    v-if="showDialog"
   ></el-tree>
    <span slot="footer">
      <el-button size="small"  @click="showDialog = false">Cancel</el-button>
      <el-button  size="small" type="primary" @click="btnOk">OK</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getPermissionListApi } from '@/api/permission'
import { transListToTreeData } from '@/utils'
import { setRoleAuthApi } from '@/api/role'
  export default {
    data() {
      return {
        showDialog: false,
        allAuthList:[], // 所有权限
        chechkAuth:[], //默认选中权限(el-tree创建的时候)
        roleId:''
      }
    },
    created () {
      this.getAllAuth()
    },
    methods: {
      // 获取所有权限
      async getAllAuth(){
        let res = await getPermissionListApi()
        this.allAuthList = transListToTreeData(res,0)
      },
      // 角色关联权限提交
      async btnOk() {
        await setRoleAuthApi({
          id:this.roleId,
          permIds:this.$refs.tree.getCheckedKeys()
        })
        this.$message.success('操作成功')
        this.showDialog = false
        this.chechkAuth = []
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>